<template>
  <el-tooltip
    v-model:visible="visible"
    :content="content"
    :effect="effect"
    :enterable="enterable"
    :disabled="disabled"
    :hide-after="hideAfter"
    :manual="manual"
    :offset="offset"
    :arrow-offset="arrowOffset"
    :placement="placement"
    :append-to="appendTo"
    :popper-class="popperClass"
    :popper-style="popperStyle"
    :raw-content="rawContent"
    :show-after="showAfter"
    :teleported="teleported"
    :transition="transition"
    :trigger="trigger"
    :visible-arrow="visibleArrow"
    @hide="handleHide"
    @show="handleShow"
  >
    <slot></slot>
  </el-tooltip>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { TooltipOptions } from './types'

const props = withDefaults(
  defineProps<{
    modelValue?: boolean
    content: string
    placement?: TooltipOptions['placement']
    effect?: TooltipOptions['effect']
    enterable?: boolean
    showAfter?: number
    hideAfter?: number
    manual?: boolean
    popperClass?: string
    popperStyle?: Record<string, any>
    disabled?: boolean
    offset?: number
    transition?: string
    visibleArrow?: boolean
    arrowOffset?: number
    appendTo?: HTMLElement | string
    teleported?: boolean
    trigger?: TooltipOptions['trigger']
    rawContent?: boolean
  }>(),
  {
    modelValue: false,
    placement: 'top',
    effect: 'dark',
    enterable: true,
    showAfter: 0,
    hideAfter: 0,
    manual: false,
    disabled: false,
    offset: 12,
    transition: 'el-fade-in-linear',
    visibleArrow: true,
    arrowOffset: 0,
    teleported: true,
    trigger: 'hover',
    rawContent: false,
  }
)

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'show'): void
  (e: 'hide'): void
}>()

const visible = ref(props.modelValue)

watch(
  () => props.modelValue,
  (val) => {
    visible.value = val
  }
)

watch(visible, (val) => {
  emit('update:modelValue', val)
})

const handleShow = () => {
  emit('show')
}

const handleHide = () => {
  emit('hide')
}
</script>

<style scoped>
.el-tooltip {
  display: inline-block;
}
</style>
